<template>
  <div>
    <v-dialog v-model="addDialog" max-width="500px">
      <v-btn @click="addDialog = true; newTagName = ''" color="primary" dark slot="activator">{{$t('management.addTag')}}</v-btn>
      <v-card>
        <v-card-title class="title">{{ $t('management.addTag') }}</v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-text-field
            prepend-icon="label"
            v-model="newTagName"
            :label="$t('management.tagName')"
          ></v-text-field>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-btn class="text--accent-2" flat @click.native="addDialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="primary darken-1" @click.native="add">{{$t('save')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-dialog v-model="dialog" max-width="500px" scrollable>
      <v-card>
        <v-card-title class="title">{{ $t('management.modifyTag') }}</v-card-title>
        <v-divider></v-divider>
        <v-card-text style="height: 300px">
          <v-text-field
            prepend-icon="label"
            v-model="defaultItem.name"
            :label="$t('management.tagName')"
          ></v-text-field>
          <v-checkbox
            v-for="i in powers"
            :key="i"
            :label="$t('route.'+i)"
            v-model="defaultItem[i]"
          ></v-checkbox>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-btn class="text--accent-2" flat @click.native="dialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="primary darken-1" @click.native="update">{{$t('save')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-data-table
      :headers="headers"
      :items="items"
      hide-actions
      class="elevation-3"
    >
      <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td>{{ props.item.isSubAdmin ? $t('yes'): $t('no') }}</td>
        <td>{{ props.item.marked }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon class="mx-0" @click.native.stop="handleUpdate(props.item)">
            <v-icon color="teal">edit</v-icon>
          </v-btn>
          <v-btn icon class="mx-0" @click.native.stop="handleDelete(props.item)">
            <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
      </template>
      <template slot="no-data">
        <v-btn color="primary">{{$t('refresh')}}</v-btn>
      </template>
    </v-data-table>

    <v-dialog v-model="delDialog" max-width="500px">
      <v-card>
        <v-card-title class="title">删除</v-card-title>
        <v-card-text>你确定要删除该数据吗，将无法恢复</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn class="text--accent-2" flat @click.native="delDialog = false">{{$t('cancel')}}</v-btn>
          <v-btn color="error" @click.native="del(defaultItem)">{{$t('sure')}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  </div>
</template>

<script>
import { fetchTags, addTag, updateTag, deleteTag } from '@/api/team'

export default {
  data: () => ({
    dialog: false,
    addDialog: false,
    delDialog: false,
    formTitle: 'management.newTag',
    newTagName: '',
    defaultItem: {
      _id: '',
      name: 'd',
      announcement: false,
      resource: true,
      vote: false,
      registry: false,
      party: false,
      evaluation: true,
      dormitory: false,
      bursary: false,
      contrast: false
    },
    headers: [
      { text: '标签名', value: 'name', align: 'left', class: 'subheading', sortable: false },
      { text: '子级管理员', value: 'isSubAdmin', align: 'left', class: 'subheading', sortable: false },
      { text: '标记人数', value: 'marked', align: 'left', class: 'subheading', sortable: true },
      { text: '操作', value: 'action', align: 'center', class: 'subheading', sortable: false }
    ],
    tags: [],
    powers: ['announcement', 'resource', 'vote', 'registry', 'party', 'evaluation', 'dormitory', 'bursary', 'contrast']
  }),
  computed: {
    items() {
      return this.tags.map(v => {
        const i = Object.assign({}, v)
        i.marked = i.members.length
        i.isSubAdmin = this.powers.some(p => i[p])
        return i
      })
    }
  },
  methods: {
    add() {
      if (!this.newTagName) return
      else {
        addTag(this.$store.getters.team, this.newTagName).then(res => {
          console.log(res.data)
          this.tags.push(res.data)
          this.$notify.success('新增标签成功')
        })
      }
      this.addDialog = false
    },
    handleUpdate(item) {
      this.dialog = true
      this.defaultItem = Object.assign({}, item)
    },
    handleDelete(tag) {
      this.defaultItem = Object.assign({}, tag)
      this.delDialog = true
    },
    del(tag) {
      if (!tag.marked) {
        deleteTag(this.$store.getters.team, tag._id).then(res => {
          if (res.data.deleted) {
            const index = this.tags.indexOf(tag)
            this.tags.splice(index, 1)
            this.$notify.success('删除成功')
          } else {
            this.$notify.error('删除失败')
          }
        })
      } else {
        this.$notify.warning('该标签下还有已标记成员')
      }
      this.delDialog = false
    },
    update() {
      if (!this.defaultItem.name || !this.defaultItem._id) {
        this.$notify.warning('标签名不能为空')
      } else {
        updateTag(this.$store.getters.team, this.defaultItem).then(res => {
          if (res.status === 200) {
            for (const item of this.tags) {
              if (item._id === res.data._id) {
                const index = this.tags.indexOf(item)
                this.tags.splice(index, 1, res.data)
                break
              }
            }
            this.$notify.success('修改成功')
          }
        })
      }
      this.dialog = false
    }
  },
  created() {
    fetchTags(this.$store.getters.team).then(res => {
      this.tags = res.data.tags
    })
  }
}
</script>

<style scoped>

</style>
